<template>
    <theme-box title="">
        <form class="form-inline" @submit.prevent v-el:form id="form">
            <div class="box-body">
                <div class='creBox' style="display: none">
                    <form-select title="二维码所属商户名称" :required="true" name="baMchtId" :options="baMchtList" :value.sync="baMchtVal"></form-select>
                    <form-input title="二维码名称" :read-only="true" :required=true name="baId" :value="baName"></form-input>
                </div>
                <form-select title="电子券所属商户名称" :required="true" name="mchtId" :options="mchtList" :value.sync ="mchtIdValue"  v-show ="this.type == true"></form-select>
                <form-input title="电子券所属商户名称" :read-only="true" :required="true" name="mchtId2"  :value ="dis?editData.mchtName:''" v-show = "dis"></form-input>
                <form-select title="电子券名称" :required=true name="couponId" :options="coupList" :value.sync = "delagateMchtId"v-show ="this.type == true"></form-select>
                <form-input title="电子券名称" :read-only="true" :required=true name="couponId2"  :value ="dis?editData.couponName:''" v-show = "dis"></form-input>
                <form-date-time title="活动开始时间" :required=true name="beginTime" :value="dis?editData.beginTime:''"></form-date-time>
                <form-date-time title="活动结束时间" :required=true name="endTime" :value="dis?editData.endTime:''"></form-date-time>
                <form-input title="电子券领取间隔" name="intervalDay" placeholder="单位/天" :required="true" :value="dis?editData.intervalDay+ '':''"></form-input>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <!-- <v-button type="reset" @click="reset">重置</v-button> -->
                <v-button type="submit" theme="primary" class="pull-right" id="submit">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>

<style lang="less" scoped>
    
</style>

<script>
    import "plugins/jquery-validation";
    import trialVue from "../activities/trial.vue";
    import {
        dateTime
    } from "ui/collections/general.js";
    var serialize = require('form-serialize');
    export default {
        data() {
            return {
                mchtIdValue:'',
                mcht:'',
                baMcht:'',
                type:true,
                mchtId: "", //商户id
                baMchtVal:"",
                baName:'',// 二维码名称
                baIdVal:'',
                mchtList:[], //商户列表
                coupList:[], //联动电子券列表
                mchtusrList: [], //店员列表
                couponList: [], //电子券列表
                baMchtList:[], //二维码商户列表
                baIdList:[], //二维码名称列表
                delagateMchtId: null
            };
        },
        props: {
            editData: Object,
            operate: {
                type: String
            },
            mchtIds: {
                type: [String, Number]
            },
        },
        computed: {
            dis() {
                return this.operate === 'edit'
            }
        },
        watch:{
            async mchtIdValue(v){
                this.mcht = v;
                //维护页面新增时间 电子券下拉列表
                if(v != '' && this.operate != '新增'){
                    await this.$post({
                            url: "/api/v2" + projectName_Url + "/plat/qr/bannertime/getMchtCouponName",
                            data:{grantMchtId:v,mchtId:this.baMcht},
                            method:"POST"
                        }).then(response => {
                            let list = response.content;
                            if(list != '' && list != null){
                                this.coupList = list.map(ele => {
                                    return {
                                        key: ele.couponName,
                                        value: ele.couponId
                                    };
                                });
                                this.$set("coupList", this.coupList);
                                // this.$set("coupList", list);
                            }else{
                                let list = [];
                                this.$set("coupList", list);
                            }
                    }, error => {});
                }
                //操作页面新增时间  电子券下拉列表
                if(v != ''&& this.operate == '新增'){
                    await this.$post({
                        url: "/api/v2" + projectName_Url + "/plat/qr/bannertime/getMchtCouponName",
                        data:{grantMchtId:v,mchtId:this.editData.baMchtId},
                        method:"POST"
                    }).then(response => {
                        let list = response.content;
                        if(list != '' && list != null){
                            this.coupList = list.map(ele => {
                                return {
                                    key: ele.couponName,
                                    value: ele.couponId
                                };
                            });
                            this.$set("coupList", this.coupList);
                            // this.$set("coupList", list);
                        }else{
                            let list = [];
                            this.$set("coupList", list);
                        }
                    }, error => {});
                }
            },
            //获取二维码所属商户列表
            baMchtVal(v){
                this.baMcht = v;
                if(v != ''){
                    this.$post({
                        url: "/api/v2" + projectName_Url + "/plat/qr/banner/queryByBaIdOrBaMchtId",
                        data:{"baId":'',"baMchtId":v},
                        method: "POST"
                    }).then(
                        response => {
                            let list = response.content;
                            // this.baIdList = list.map(ele => {
                            //     return {
                            //         key: ele.baName,
                            //         value: ele.baId
                            //     };
                            // });
                            // this.$set("baIdList", this.baIdList);
                            let name = list.map(ele => {
                                return {
                                    key: ele.baName,
                                    value:ele.baId
                                };
                            });
                            for(var i in name){
                                this.baName = name[i].key;
                                this.baIdVal = name[i].value
                            }
                        },
                        error => {}
                    );
                    //获取电子券所属商户列表
                    this.$post({
                        url: "/api/v2" + projectName_Url + "/plat/qr/bannertime/getAgentsMcht/"+ v,
                        method: "GET"
                    }).then(
                        response => {
                            let list = response.content;
                            if(list != '' && list != [] && list != null){
                                this.mchtList = list.map(ele => {
                                    return {
                                        key: ele.mchtId +'-'+ele.mchtName,
                                        value: ele.mchtId
                                    };
                                });
                            }
                        },
                        error => {}
                    );
                }
            },

        },
        methods: {
            //获取二维码所属商户名称
            getNameList(data) {
                let self = this;
                self.$post({
                    url: "/api/v2" + projectName_Url + "/plat/qr/banner/queryByBaIdOrBaMchtId",
                    data:{"baId":'',"baMchtId":''},
                    method: "POST"
                }).then(
                    response => {
                        let list = response.content;
                        self.baMchtList = list.map(ele => {
                            return {
                                key: ele.baMchtId +'-'+ele.mchtName,
                                value: ele.baMchtId
                            };
                        });
                    },
                    error => {}
                );
            },
        },
        ready() {
            dateTime({
                format: "hh:ii",
                startDate:'',
                endDate:'',
                minView: 0,
                maxView: 2,
                startView: 0 //显示视图从时分开始
            });

            //隐藏日期title
            $('.datetimepicker .datetimepicker-minutes .table-condensed thead tr th:nth-child(2)').css('visibility','hidden')

            if(this.dis){  //如果是修改
                this.type = false;
            }else if(this.operate != '新增'){
                this.getNameList();
                this.type = true;
            }else{
                this.type = true;
            }
            const self = this;
            const d = self.editData;
            console.log(d)
            //操作页面新增
            if(self.operate == '新增'){
                //获取电子券所属商户列表
                self.$post({
                    url: '/api/v2' + projectName_Url + '/plat/qr/bannertime/getAgentsMcht/' + d.baMchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content;
                    if(list != '' && list != [] && list != null){
                        self.mchtList = list.map(ele => {
                            return {
                                key: ele.mchtId +'-'+ele.mchtName,
                                value: ele.mchtId
                            };
                        });
                    }
                },  error => {});
            }
            //维护页新增
            //获取电子券名称列表
            // if(self.mchtList != '' && self.mchtList != null && self.mchtList != []&& self.operate != '新增') {
            //     self.$post({
            //         url: "/api/v2" + projectName_Url + "/plat/qr/bannertime/getMchtCouponName",
            //         data: {grantMchtId: this.mcht, mchtId: d.baMchtId},
            //         method: "POST"
            //     }).then(response => {
            //         let list = response.content;
            //         if (list != '' && list != null) {
            //             self.coupList = list.map(ele => {
            //                 return {
            //                     key: ele.couponName,
            //                     value: ele.couponId
            //                 };
            //             });
            //             self.$set("coupList", this.coupList);
            //             // this.$set("coupList", list);
            //         } else {
            //             let list = [];
            //             self.$set("coupList", list);
            //         }
            //     }, error => {
            //     });
            // }
            $(this.$els.form).validate({
                submitHandler: async function(form) {
                    let method = "POST";
                    var _data = serialize(this.currentForm, {
                        hash: true,
                        empty: true
                    });

                    if(self.dis){  //如果是维护页面的修改 删掉为了显示的两个多余字段
                        delete _data.mchtId2;
                        delete _data.couponId2;
                        _data.baDefId = d.baDefId;
                        _data.baMchtId = d.baMchtId;
                    }else if(self.operate == '新增'){
                        //操作页面新增时间
                        _data.baId = d.baId;
                        _data.baMchtId = d.baMchtId;
                    }else{
                        //维护页面的新增时间
                        _data.baId = self.baIdVal;
                    }

                    //传参的时候去除时间段的冒号
                    _data.beginTime =  _data.beginTime.split(":").join("");
                    _data.endTime =  _data.endTime.split(":").join("");

                    if (self.operate == "edit") { // 编辑
                        delete _data.mchtId;
                        delete _data.couponId;
                        delete _data.baId;
                        method = "PATCH";
                    } else delete _data.baDefId;

                    // loading(true);
                    var result = await self
                        .$post({
                            url: "/api/v2" + projectName_Url + "/plat/qr/bannertime",
                            data:_data,
                            method
                        })
                        .then(response => {
                            let data = {
                                title: "提示",
                                content: "操作成功,是否跳转到广告二维码时间列表?"
                            };
                            if (self.operate == "edit" || self.operate == "create") { // 编辑 提示语
                                Midway.alert({
                                    title: "提示",
                                    content: "操作成功"
                                })
                                self.$emit("close", true);
                            } else  if(self.operate == '新增'){
                                self.$emit("close");
                                Midway.confirm(data).then(function() {
                                    self.$route.router.go("/advertCode/list");
                                });
                            }
                        })
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    mchtId: {
                        required: true,
                    },
                    beginTime: {
                        required: true,
                        compareDateAno: ["beginTime", "endTime"]
                    },
                    endTime: {
                        required: true,
                        compareDateAno: ["beginTime", "endTime"]
                    },
                    couponId: {
                        required: true
                    },
                    intervalDay: {
                        required: true,
                        int: true,
                        min:0,
                        max:100
                    }
                }
            });
        }
    };
</script>

